<template>
  <div class="lyrics animate__animated animate__fadeIn" id="lyrics" :style="'height:' + height">
    <!-- {{ currentPlayProgress }} -->
    <!-- {{ $store.state.currentPlayProgress }} -->
    <!-- {{ currentLineIndex }} -->
    <ul class="lyrics_list" v-if="lastLyrics.length" :style="rollback()">
      <li v-for="(v,i) in lastLyrics" :key="i" :class="highLight(v,i)">
        {{ v.slice(v.search(']') + 1) }}
      </li>
    </ul>
    <p class="empty_text" v-if="!Object.keys(lastLyrics).length">{{ this.emptyText }}</p>

    <!-- 歌词延时调整 -->
    <div class="lyrics-offset" v-if="lastLyrics.length">
      <i class="el-icon-circle-plus-outline" title="加快0.2S" @click="handlerChangeOffset(1)"></i>
      <i class="el-icon-remove-outline" title="减慢0.2S" @click="handlerChangeOffset(-1)"></i>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  props: {
    height: {
      type: String,
      required: true
    },
  },
  computed: {
    ...mapState([
      'currentLyrics',
      'currentPlayProgress',
    ])
  },
  data () {
    return {
      lastLyrics: '',
      emptyText: '此音乐没有歌词',
      showZhLyrics: false, // 显示中文版歌词
      rollBackTop: 0, // 歌词回滚高度
      currentLineIndex: 0, // 当前歌词行索引
      lyricsOffset: -0.25 // 歌词时间偏移量
    }
  },
  mounted () { },
  watch: {
    currentLyrics: {
      deep: true,
      handler (newVal, oldVal) {
        if (Object.keys(newVal).length) {
          this.lastLyrics = newVal.natLy.split('\n')
        } else {
          this.lastLyrics = ''
        }
      }
    },
    showZhLyrics: {
      handler (newVal, oldVal) {
        if (newVal && this.currentLyrics.hasZh) {
          this.lastLyrics = this.currentLyrics.zhLy
        } else {
          this.lastLyrics = this.currentLyrics.natLy
        }
      }
    }
  },
  methods: {
    // 高亮显示当前歌词
    highLight (v, i) {
      if (!v.match(/^(\[).*(?=\])/g)) return
      let start = this.time2Second(v.match(/^(\[).*(?=\])/g)[0]),
        end = '';
      if (this.lastLyrics[i + 1] && !!this.lastLyrics[i + 1].match(/^(\[).*(?=\])/g)) {
        end = this.time2Second(this.lastLyrics[i + 1].match(/^(\[).*(?=\])/g)[0])
      } else {
        end = 1000
      }
      // console.log(start, end)
      if (start + this.lyricsOffset <= this.currentPlayProgress && this.currentPlayProgress < end + this.lyricsOffset) {
        this.currentLineIndex = i
        return 'lyrics_item lyrics_item--active'
      }
      return 'lyrics_item'
    },

    // 歌词向上回滚
    rollback () {
      // 依据容器高度计算出垂直居中的行数
      let lineHeight = 28, middleline = 0, height = parseInt(this.height)
      middleline = (parseInt(height / lineHeight) + 1) >> 1

      // 当高亮行索引大于等于居中行时，开始回滚
      if (middleline < this.currentLineIndex)
        return 'top: ' + (middleline - this.currentLineIndex) * 28 + 'px'
      return ''
    },

    // 分秒毫秒转为秒
    time2Second (time) {
      time = time.slice(1)
      let m = parseInt(time.split(':')[0]),
        s = parseInt(time.split('.')[0].split(':')[1]),
        ms = parseInt(time.split('.')[1])
      return m * 60 + s + ms / 1000
      // s = time.splict
    },

    // 歌词延时调整
    handlerChangeOffset (type) {
      if (type === 1) {
        this.lyricsOffset -= 0.2
        return this.showMessage('歌词已加快0.2S')
      } else {
        this.lyricsOffset += 0.2
        return this.showMessage('歌词已减慢0.2S')
      }
    },

    // 提示信息
    showMessage (text) {
      this.$message({
        dangerouslyUseHTMLString: true,
        center: true,
        duration: 1800,
        message: '<p style="color: #009a61;font-size: 15px;">' + text + '</p>',
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import ".././css/lyric-tmp.scss";
</style>
